{% extends 'base.html' %}

{% block content %}
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 40px;
            background-color: #121212; /* 深色背景 */
            color: #17e53c; /* 浅色文字 */
        }

        h1 {
            margin-bottom: 30px;
        }

        /* 输入框样式 */
        .input-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 20px;
        }

        .text-input {
            width: 300px;
            padding: 10px;
            border: none;
            border-radius: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            outline: none;
            font-size: 14px;
            transition: box-shadow 0.3s;
        }

        .text-input:focus {
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }

        #record-btn {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #ff5f5f, #ff1f1f);
            border-radius: 50%;
            border: none;
            cursor: pointer;
            outline: none;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: visible;
            transition: box-shadow 0.3s;
            margin-bottom: 20px;
        }

        #record-btn:hover {
            box-shadow: 0 0 15px rgba(255, 31, 31, 0.4);
        }

        #record-btn svg {
            fill: #fff;
            width: 30px;
            height: 30px;
            transition: transform 0.3s;
        }

        #record-btn.recording svg {
            transform: scale(1.2);
        }

        /* 脉冲动画 */
        #record-btn.recording::before, #record-btn.recording::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: rgba(255, 31, 31, 0.3);
            opacity: 0;
            animation: pulse 1.5s infinite;
        }

        #record-btn.recording::after {
            width: 140px;
            height: 140px;
            animation-delay: 0.75s;
        }

        @keyframes pulse {
            0% {
                transform: translate(-50%, -50%) scale(0.8);
                opacity: 0.5;
            }
            50% {
                transform: translate(-50%, -50%) scale(1.2);
                opacity: 0;
            }
            100% {
                transform: translate(-50%, -50%) scale(1.5);
                opacity: 0;
            }
        }

        #status {
            margin-top: 20px;
            font-size: 16px;
            text-align: center;
            color: #17e53c;
        }

        /* 提交按钮样式 */
        #submit-btn {
            padding: 10px 20px;
            background: #4CAF50;
            border: none;
            border-radius: 20px;
            color: #fff;
            font-size: 14px;
            cursor: pointer;
            margin-top: 10px;
            transition: background 0.3s;
        }

        #submit-btn:hover {
            background: #45a049;
        }

        #submit-btn:disabled {
            background: #ccc;
            cursor: not-allowed;
        }
    </style>

    <body>
    <center>
        <h1>录音模板</h1>

        <div class="input-container">
            <input class="text-input" type="text" id="content-input" placeholder="在这里输入文本内容..."/>
        </div>

        <button id="record-btn" title="点击开始录音">
            <!-- 简单的麦克风SVG图标 -->
            <svg viewBox="0 0 24 24">
                <path d="M12 14c1.656854 0 3-1.343146 3-3V5c0-1.656854-1.343146-3-3-3s-3 1.343146-3 3v6c0 1.656854 1.343146 3 3 3zM18.5 11c0 3.038057-2.461943 5.5-5.5 5.5S7.5 14.038057 7.5 11H6c0 3.592839 2.666042 6.561127 6 6.95053V21h-3v2h8v-2h-3v-3.04947c3.333958-.389403 6-3.357691 6-6.95053h-1.5z"></path>
            </svg>
        </button>

        <button id="submit-btn" disabled>提交</button>

        <p id="status">准备就绪</p>
    </center>
    <!-- 引入Recorder.js库（这里使用CDN，仅为演示） -->
    <script src="https://cdn.jsdelivr.net/gh/mattdiamond/Recorderjs@master/dist/recorder.js"></script>
    <script>
        let recorder;
        let audioStream;
        let isRecording = false;
        let recordedBlob = null; // 保存录制的音频数据
        const recordBtn = document.getElementById('record-btn');
        const statusEl = document.getElementById('status');
        const submitBtn = document.getElementById('submit-btn');
        const contentInput = document.getElementById('content-input');

        recordBtn.addEventListener('click', async () => {
            if (!isRecording) {
                // 开始录音
                statusEl.textContent = "请求麦克风权限...";
                try {
                    audioStream = await navigator.mediaDevices.getUserMedia({audio: true});
                    const audioContext = new AudioContext();
                    const input = audioContext.createMediaStreamSource(audioStream);

                    recorder = new Recorder(input, {numChannels: 1});
                    recorder.record();

                    recordBtn.classList.add('recording');
                    recordBtn.title = "点击停止录音并上传";
                    statusEl.textContent = "正在录音...";
                    isRecording = true;
                    submitBtn.disabled = true;
                    recordedBlob = null;
                } catch (err) {
                    console.log(err);
                    statusEl.textContent = "无法访问麦克风：" + err.message;
                }
            } else {
                // 停止录音
                recorder.stop();
                audioStream.getAudioTracks().forEach(track => track.stop());

                recordBtn.classList.remove('recording');
                recordBtn.title = "点击开始录音";
                statusEl.textContent = "正在处理音频...";
                isRecording = false;

                recorder.exportWAV(blob => {
                    recordedBlob = blob;
                    statusEl.textContent = "录音完成，请输入内容并点击提交";
                    submitBtn.disabled = false; // 允许提交
                });
            }
        });

        submitBtn.addEventListener('click', () => {
            if (!recordedBlob) {
                statusEl.textContent = "请先录制音频再提交";
                return;
            }
            statusEl.textContent = "开始上传...";
            uploadAudio(recordedBlob, contentInput.value);
        });

        function uploadAudio(blob, content) {
            const formData = new FormData();
            formData.append('file', blob, 'recorded_audio.wav');
            formData.append('content', content);

            fetch('/card/voice_processing/', {
                method: 'POST',
                body: formData
            })
                .then(response => response.json())
                .then(data => {
                    statusEl.textContent = "上传成功：" + JSON.stringify(data);
                })
                .catch(err => {
                    statusEl.textContent = "上传失败：" + err.message;
                });
        }
    </script>
    </body>
{% endblock %}
